<template>
<!--vip-->
  <div class="content">
    <headers></headers>
    <carousel></carousel>
    <div class="first">
      <div class="auto clearfix">
        <p class="title">{{person.vipName}}</p>
        <div class="pull-left">
          <p class="price">￥{{person.vipPrice}}元/年</p>
          <ul>
            <li v-for="con in person.vipconfig">{{con.vipPriItem}}</li>
            <li>....</li>
          </ul>
          <p class="num"><span v-for="(n,index) in personNum">{{personNum[index]}}</span>人已购买</p>
          <Button @click="personVIP">立即购买</Button>
        </div>
        <div class="pull-right">
          <img :src="person.vipImg" alt="">
          <p class="money">尊享价 <span>￥{{person.vipPrice}}</span></p>
        </div>
      </div>
    </div>
    <div class="two">
      <div class="auto clearfix padding250">
        <p class="title">{{company.vipName}}</p>
        <div class="pull-left">
          <img :src="company.vipImg" alt="">
          <p class="money">尊享价 <span>￥{{company.vipPrice}}</span></p>
        </div>
        <div class="pull-right">
          <p class="price">￥{{company.vipPrice}}元/年</p>
          <ul>
            <li v-for="conf in company.vipconfig">{{conf.vipPriItem}}</li>
            <li>....</li>
          </ul>
          <p class="num font14"><span v-for="(n,index) in companyNum">{{companyNum[index]}}</span>人已购买</p>
          <Button @click="companyVIPInfo">立即购买</Button>
        </div>
        <img src="../../assets/tuijian.png" alt="" class="tuijian">
      </div>
    </div>
    <footers></footers>
    <Modal  class-name="vertical-center-modal" v-model="isShow" footer-hide width="580px" class="login_model">
      <p class="model_header">开通企业VIP</p>
      <div class="model_content vip">
        <Form ref="companyInfoForm" :model="companyOrder" :rules="companyInfoRule" label-position="left" :label-width="102">
          <FormItem label="企业名称" prop="companyName">
            <Input v-model="companyOrder.companyName" placeholder="请输入企业名称" :maxlength="40"/>
          </FormItem>
          <FormItem label="申请人姓名" prop="linkName">
            <Input v-model="companyOrder.linkName" placeholder="请输入申请人姓名" :maxlength="25"/>
          </FormItem>
          <FormItem label="联系方式" prop="linkPhone">
            <Input v-model="companyOrder.linkPhone" placeholder="请输入联系方式" ref="vipphone1"  @on-keyup="validatePhone" :maxlength="25" />
          </FormItem>
          <FormItem>
            <Button  long @click="companyVIP">立即提交</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <loginmodal  ref="loginH"></loginmodal>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .model_header{
    color:#fff;
    text-align:center;
    background-color: #957960;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
  }
  .model_content{
    padding: 30px 50px;
    .ivu-input{
      border-radius: 0;
      display: inline-block;
    }
    button{
      background-color: #957960;
      border-color: #957960;
      height: 40px;
      font-size: 14px;
      color: #fff;
    }
  }
.content{
  //background-color: #f5f5f5;
  .first,.two{
    text-align: left;
  }
  .two{
    background-color: #fff;
    margin:40px 0 -50px;
    padding-bottom: 40px;
    .auto{
      padding-top: 20px;
      position: relative;
      .tuijian{
        position: absolute;
        top:20px;
        right: 0;
      }
      .pull-left{
        margin-top: 45px;
      }
      .money{
        color: #f2b05a;
        left:calc(100% - 210px);
        bottom: 45px;
      }
      .pull-right{
        padding-left: 40px;
      }
      .price{
        margin: 0 0 20px;
      }
    }
  }
  .first .pull-left,.two .pull-right{
    width: 599px;
  }
  .title{
    font-size: 20px;
    color: #000;
    margin-top: 15px;
  }
  .price{
    font-size: 24px;
    color: #ff3300;
    margin: 20px 0 30px;
  }
  li{
    font-size: 16px;
    color: #666;
    line-height: 33px;
    padding-left: 5px;
  }
  .num{
    /*font-size: 16px;*/
    color: #666;
    margin: 50px 0 30px;
    padding-left: 1px;
    span{
      font-size: 22px;
      color: #fff;
      display: inline-block;
      width: 27px;
      height: 36px;
      background-color: #999;
      line-height: 36px;
      text-align: center;
      border-radius: 5px;
    }
    span:nth-child(2){
      margin: 0 5px;
    }
    span:last-child{
      margin-right: 15px;
    }
  }
  button{
    height: 46px;
    width: 230px;
    background-color: #957960;
    color: #fff;
    font-size: 16px;
  }
  .first .pull-right,.two .pull-left{
    position: relative;
    width: 601px;
    img{
      width : 100%;
      border-radius: 20px;
    }
  }
  .money{
    color: #f0cc3f;
    font-size: 18px;
    position: absolute;
    bottom: 30px;
    left: 25px;
    span{
      font-size: 26px;
      margin-left: 5px;
    }
  }
}
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import loginmodal from '../template/loginmodal'
  import {vipPageWeb,centreInfoWeb,addOrder} from '../../http'
  import imgPathFilter from '../../myFilters'
  import {getStore} from '../../storage'
    export default {
        name: 'vip',
        props: {},
        data() {
            return {
              isShow:false,         //企业购买vip信息填写框
              companyNum:'',        //企业vip购买人数
              personNum:'',         //个人vip购买人数
              company:'',           //企业vip权限信息
              person:'',            //个人vip权限信息
              companyOrder:{        //企业vip订单信息
                linkName:'',
                linkPhone:'',
                companyName:'',
              },
              //企业表单认证
              companyInfoRule:{
                companyName:[
                  {required:true,message:"请输入企业名称",trigger:'blur'}
                ],
                linkName:[
                  {required:true,message:'请输入申请人姓名',trigger:'blur'}
                ],
                linkPhone:[
                  {required:true,message:'请输入联系方式',trigger:'blur'}
                ]
              }
            };
        },
        methods: {
          //数字输入框
          validatePhone() {
            this.companyOrder.linkPhone = this.$refs.vipphone1.value.replace(/[^\d]{1,11}/g, "")
          },
          //个人vip购买
          personVIP(){
            //用户是否登录
            centreInfoWeb().then(res => {
              if(res.code === 200){
                //创建订单
                addOrder({token:getStore('token'),type:'OT_VIP',targetId:2,applyType:'3'}).then(res => {
                  if(res.code === 200){
                    this.$router.push({
                      name: 'buy',
                      query:{
                        orderId:res.data.orderId
                      }
                    })
                  }else{
                    this.$Notice.warning({
                      title: "VIP会员提醒",
                      desc: res.info,
                      duration: 3,
                    });
                  }
                })
              }else{
                this.$refs.loginH.showModal();
              }
            })
          },
          //填写企业信息
          companyVIPInfo(){
            //用户是否登录
            centreInfoWeb().then(res => {
                if(res.code === 200){
                  this.isShow = true;
                }else{
                  //用户未登录，显示登录框
                  this.$refs.loginH.showModal();
                }
            }).catch()
          },
          companyVIP(){
            //企业vip表单验证
            this.$refs['companyInfoForm'].validate((valid) => {
              if (valid) {
                //用户是否登录
                centreInfoWeb({token: getStore('token')}).then(res => {
                  if (res.code === 200) {
                    //创建订单
                    addOrder({token: getStore('token'), type: 'OT_VIP', targetId: 1, applyType: '3',linkName:this.companyOrder.linkName,linkPhone:this.companyOrder.linkPhone,company:this.companyOrder.companyName}).then(res => {
                      if (res.code === 200) {
                        //跳转企业vip支付页面（银联支付）
                        this.$router.push({
                          name: 'bankbuy',
                          query: {
                            orderId: res.data.orderId
                          }
                        })
                      } else {
                        this.$Notice.warning({
                          title: "VIP会员提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    //用户未登录，显示登录框
                    this.$refs.loginH.showModal();
                  }
                }).catch()
              }else {
                this.$Notice.warning({
                  title: "VIP会员提醒",
                  desc: '请填写信息!',
                  duration: 3,
                });
              }
            }).catch()
          }
        },
        created() {
          //企业vip页面信息
          vipPageWeb().then(res => {
            this.company = res.data.list[0];
            this.person = res.data.list[1];
            this.companyNum = res.data.company + '';
            this.personNum = res.data.person + '';
          }).catch()
        },
        components: {
          headers,
          footers,
          carousel,
          loginmodal
        }
    }
</script>
